<template>
  <div class="container">
    <el-form label-position="left" ref="form" :rules="rules" :model="form">
      <div class="title-container">
        <h3>推广设置</h3>
      </div>
        <el-form-item label="推广奖励设置:" prop="money">
                <el-input
                 placeholder="请填写推广奖励"
                 v-model.number="form.money"
                >
                </el-input>
        </el-form-item>
      <el-form-item label="奖励机制说明:" prop="description">
        <el-input type="textarea" v-model="form.description" placeholder="" :rows="8" style="width:80%;"></el-input>
      </el-form-item>
      <div class="tip-container">
          <span>注意：管理员可查看到您的奖励信息，切勿造假.</span>
      </div>
      <div class="button-container">
        <el-button type="primary"  @click.prevent="update" class="el-icon-edit" :loading="loading">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {getPromoteInfo, updatePromoteInfo} from '@/api/setting'
    export default {
        name: "reward",
        inject: ['reload'],
        data () {
          return {
            form: {
                money: 0,
                description: ''
            },
            loading: false,
            rules: {
                money : [
                  {required: true, message: '请填写奖励金额'},
                  {type: 'number', message: '金额必须是数字值'}
                ],
                description : [
                  {required: true, message: '请填写推广奖励机制说明'},
                  {min: 20, max: 300, message: '推广奖励说明字符必须在20到300之间'}
                ]
            }
          };
        },
        methods: {
          update() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return false;
                }
                this.loading = true;
                updatePromoteInfo({promote_money: this.form.money, promote_description: this.form.description}).then(response => {
                      this.$message.success(response.msg);
                      this.loading = false;
                      this.reload();
                }).catch (() => {
                      this.loading = false;
                })

            });
          }
        },
        mounted () {
            getPromoteInfo().then(response => {
                this.form.money = Number(response.data.promote_money);
                this.form.description = response.data.promote_description;
            }).catch(() => {

            })
        }
    }
</script>
<style lang='scss' scoped>
  .container {
    min-width: 100%;
    width:100%;
    overflow: hidden;

    .el-form {
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      width:600px;
      max-width: 100%;
      position: relative;
      margin: 10px auto;

      .title-container {
        width: 100%;
        text-align: center;
        h3 {
          height:20px;
          line-height: 20px;
          font-size: 25px;
        }
        margin-bottom: 50px;
      }

      .el-form-item {
        margin-left:30px;
      }
      .el-input {
        width: 50%;
        border: 1px solid #F2F6FC;
      }


      .button-container {
        width: 20%;
        max-width: 20%;
        margin: 10px auto;

        .el-button {
          width: 100%;
        }
      }

      .tip-container {
        width:100%;
        text-align: center;
        span {
          font-size: 15px;
          color:red;
        }
      }
    }
  }
</style>
